﻿<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" ng-app="taskMgrApp">
<head>
    <meta charset="utf-8">
    <title>Task Manager</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <!--link rel="stylesheet/less" href="less/bootstrap.less" type="text/css" /-->
    <!--link rel="stylesheet/less" href="less/responsive.less" type="text/css" /-->
    <!--script src="js/less-1.3.3.min.js"></script-->
    <!--append ‘#!watch’ to the browser URL, then refresh the page. -->


    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="js/html5shiv.js"></script>
    <![endif]-->
    <!-- Fav and touch icons -->
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="img/apple-touch-icon-57-precomposed.png">
    <link rel="shortcut icon" href="img/favicon.png">


    <!-- AngularJS -->
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <!-- UI Bootstrap -->
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.js"></script>
    <!-- Firebase -->
    <script src="https://cdn.firebase.com/js/client/2.2.2/firebase.js"></script>
    <!-- AngularFire -->
    <script src="https://cdn.firebase.com/libs/angularfire/1.0.0/angularfire.min.js"></script>

</head>
<body>
    <div class="container" ng-controller="HomeController">
        <div class="row clearfix">
            <div class="col-md-12 column">
                <h1>Task Manager</h1><hr />
                <form class="form-horizontal form" role="form" >
                    <div class="form-group">
                        <br />
                        <label for="inputTaskName" class="col-sm-2 control-label">Task Name:</label>
                        <div class="col-sm-6">
                            <input type="text" name="taskName" value="" size="70" ng-model="taskName" placeholder="Task Name" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputTaskDesc" class="col-sm-2 control-label">Task Description:</label>
                        <div class="col-sm-6">
                            <input type="text" name="taskDesc" value="" size="70" ng-model="taskDesc" placeholder="Task Description" />
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputTaskAssign" class="col-sm-2 control-label">Assigned To:</label>
                        <div class="col-sm-6">
                            <input type="text" name="taskAssign" value="" size="70" ng-model="taskAssign" placeholder="Task Owner" />
                        </div>
                    </div>
                    <div class="form-group">
                        <!--<div class="form-group" ng-controller="DatepickerDemoCtrl">-->
                        <label for="inputTaskDate" class="col-sm-2 control-label">Task Deadline:</label>
                        <div class="col-sm-6">
                            <input type="text" name="taskDate" value="" size="70" ng-model="taskDate" placeholder="Due Date" />
                            <!--<input type="text" class="form-control" datepicker-popup="{{format}}" ng-model="taskDate" is-open="opened" min-date="minDate" max-date="'2015-12-31'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
                            <span class="input-group-btn">
                                <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                            </span> -->
                        </div>
                    </div>
                    <div class="form-group">
                        <div class="col-sm-12 text-center">
                            <button class="btn btn-primary btn-group-lg" ng-show="!editMode" ng-click="doAddTask()">Add Task</button>
                            <button class="btn btn-warning btn-group-lg" ng-show="editMode" ng-click="doSaveTask()">Save Changes</button>
                            <button class="btn btn-default btn-group-lg" ng-show="editMode" ng-click="doCancelSave()">Cancel</button>
                        </div>
                    </div>
                    <br />
                </form>
                <br />
                <br />
                <table class="table table-bordered table-hover table-condensed">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Task</th>
                            <th>Description</th>
                            <th>Assigned To</th>
                            <th>Due Date</th>
                            <th>Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr ng-repeat="t in myTodos"><td>{{($index + 1)}}</td><td>{{t.taskName}}</td><td>{{t.taskDesc}}</td><td>{{t.taskAssign}}</td><td>{{t.taskDate}}</td><td><button class="btn btn-warning btn-xs" ng-click="doEditTask($index)"><span class="glyphicon glyphicon-pencil"></span></button>  <button class="btn btn-danger btn-xs" ng-click="myTodos.$remove(t)"><span class="glyphicon glyphicon-remove"></span></button></td></tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>

    <script src="Scripts/jquery.min.js"></script>
    <script src="Scripts/angular-ui/ui-bootstrap.js"></script>
    
    <script src="app.js"></script>

</body>
</html>
